<template>
	<div class="Wregister">
		<div class="Jregister_logo flex align_center justify_cen">
			<img src="../../../../static/img/images/logo2.jpg" />
		</div>
		<div class="Jregister_body">
			<div class="Jregister_body_input flex align_center">
				<div class="Jregister_body_name">　姓名</div>
				<input type="text" class="flex1" v-model="message.name" />
			</div>
			<div class="Jregister_body_input flex align_center">
				<div class="Jregister_body_name">手机号</div>
				<input type="number" class="flex1" v-model="message.mobile" />
			</div>
			<div class="Jregister_body_input flex align_center">
				<div class="Jregister_body_name">验证码</div>
				<input type="number" class="flex1" v-model="message.sms_code" />
				<v-Code :phoneNew='message.mobile'></v-Code>
			</div>
			<div class="Jregister_body_pic clear2">
				<p class="Jregister_body_areaTitle">
					实名认证
				</p>
				<div class="Jregister_body_picUpload">
					<el-upload
					  class="avatar-uploader"
					  :action="defines.upload_img"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess"
					  name='userfile'
					>
					  <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
					  <div class="Jregister_body_picPlus" v-else>
					  	<div class="Jregister_body_picI">
					  		<i  class="el-icon-plus avatar-uploader-icon"></i>
					  	</div>
					  	<p class="Jregister_body_picP">添加身份证正面</p>
					  </div>
					</el-upload>
				</div>
				<div class="Jregister_body_picUpload">
					<el-upload
					  class="avatar-uploader"
					  :action="defines.upload_img"
					  :show-file-list="false"
					  name='userfile'
					  :on-success="handleAvatarSuccess2"
					>
					  <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
					  <div class="Jregister_body_picPlus" v-else>
					  	<div class="Jregister_body_picI">
					  		<i  class="el-icon-plus avatar-uploader-icon"></i>
					  	</div>
					  	<p class="Jregister_body_picP">添加身份证反面</p>
					  </div>
					</el-upload>
				</div>
			</div>
			<!--<div class="Jregister_body_input flex align_center" style=";margin-top: 3rem;">
				<div class="Jregister_body_name">授权码</div>
				<input type="text" class="flex1" disabled="disabled" />
			</div>
			<el-button round class='Jregister_body_button' @click='jump'>提交申请</el-button>-->
		</div>
		<div class="register_radio">
			<div class="register_radio_div flex" :class="radioI==1?'register_radio_active':''" @click="radioI=1">
				<p class="register_radio_divS"></p>
				<p class="register_radio_divP">邀请注册</p>
				<div  class="flex1 register_radio_divInput">
					<input type="text" placeholder="手机短信收到的邀请码"  v-model="reg_invitation_code" />
					<p>(由匠管邀请，输入邀请码注册)</p>
				</div>
				<div class="register_radio_divButton flex flex_flow align_center justify_cen" @click="jump">
					<span>申请</span>
					<span>注册</span>
				</div>
			</div>
			<div class="register_radio_div flex" :class="radioI==2?'register_radio_active':''" @click="radioI=2">
				<p class="register_radio_divS"></p>
				<p class="register_radio_divP">支付注册</p>
				<div  class="flex1 register_radio_divInput">
					<div class="register_radio_divInputD flex">
						<span>￥</span>
						<input type="number" :value="systemList.carpenter_reg_parame.carpenter_reg_price" class="flex1" disabled="disabled" />
					</div>
					<p>(支付注册,获得同等数额匠子)</p>
				</div>
				<div class="register_radio_divButton flex flex_flow align_center justify_cen" @click="jump2">
					<span>申请</span>
					<span>注册</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	import vCode from '../../common/yzm.vue';
	export default {
		components:{
            vCode
        },
		data: function() {
			return {
				imageUrl1: '',
				imageUrl2:'',
				radioI:1,
				message:{
					'name':'',
					'mobile':'',
					'sms_code':'',
					'id_card_up':'',
					'id_card_down':'',
					'type':'',
				},
				reg_invitation_code:'',
			}
		},
		mounted() {
		},
		methods: {
			
			jump(){
				this.message.id_card_up=this.imageUrl1;
				this.message.id_card_down=this.imageUrl2;
				this.message.type=this.radioI;
				this.message.reg_invitation_code=this.reg_invitation_code;
				this.message.member_id=window.uid;
				console.log(this.message)
				for(let i in this.message){
					if(this.message[i]==''){
						Toast('请先填写数据')
						return false;
					}
				}
				this.ajax(this, {
						'url': this.defines.carpenter_reg,
						'type': 'post',
						'data':this.message,
						'callback': data => {
							if(data.data.error_code==0) {
								Toast('注册提交成')
								window.history.go(-1);
	
							} else {
								Toast(data.data.error_msg)
							}
	
						},
						'errorback': errory => {
	
						},
	
					})
//				this.$router.push({
//      			path: '/Jreturn',
//				})
			},
			jump2(){
				
				this.message.id_card_up=this.imageUrl1;
				this.message.id_card_down=this.imageUrl2;
				this.message.type=this.radioI;
				this.message.pay_money=this.systemList.carpenter_reg_parame.carpenter_reg_price;
				this.message.member_id=window.uid;
				
				for(let i in this.message){
					if(this.message[i]==''){
						Toast('请先填写数据')
						return false;
					}
				}
				this.ajax(this, {
						'url': this.defines.carpenter_pay_reg,
						'type': 'post',
						'data':this.message,
						'callback': data => {
							if(data.data.error_code==0) {
								WeixinJSBridge.invoke(
							        'getBrandWCPayRequest', data.data.data, 
							        function(res){
							            if(res.err_msg == "get_brand_wcpay_request:ok" ) {
							            	Toast('支付成功');
							            	window.history.go(-1);
							            	
							            }else{
							            	Toast(res.err_code+res.err_desc+res.err_msg);
							            }
							        }
							    );
								
	
							} else {
								Toast(data.data.error_msg)
							}
	
						},
						'errorback': errory => {
	
						},
	
					})
			},
			
			handleAvatarSuccess(res, file) {
		        this.imageUrl1 = file.response.image;
		        alert(this.imageUrl1);
		        Toast(res.error_msg)
		    },
		    handleAvatarSuccess2(res, file) {
		        this.imageUrl2 = file.response.image;
		        Toast(res.error_msg)
		    },
		    
		}
	}
</script>

<style scoped>
	.Jregister_logo{
		height: 20rem;
		width: 100%;
		background: #000000;
	}
	.Jregister_logo img{
		width: 50%;
		display: block;
	}
	.Jregister_body{
		width: 86%;
		margin: 2rem auto;
		
	}
	.Jregister_body_input{
		height: 3rem;
		width: 100%;
		margin-bottom: 2rem;
	}
	.Jregister_body_name{
		font-size: 1.6rem;
		margin-right: 1.6rem;
	}
	.Jregister_body_input input{
		height: 3rem;
		font-size: 1.4rem;
		line-height: 1.6rem;
		background: #fff;
		border: 1px solid #e6e6e6;
		box-sizing: border-box;
		color: #000000;
		border-radius: 0.4rem;
		text-indent: 0.5rem;
	}
	.Jregister_body_code{
		border-radius: 0.4rem;
		padding: 0 1rem;
		background: #000;
		color: #f7bd40;
		font-size: 1.2rem;
		line-height: 3rem;
		height: 3rem;
		margin-left: 1rem;
	}
	.Jregister_body_area{
		width: 100%;
		
	}
	.Jregister_body_areaTitle{
		margin: 2rem 0;
		font-size: 1.6rem;
		color: #000;
		text-align: center;
	}
	.Jregister_body_areaSelect{
		width: 32%;
		float: left;
		border-radius: 0.4rem;
		overflow: hidden;
		
	}
	
	.Jregister_body_button{
		width: 65%;
		background: #000;
		color: #f7bd40;
		font-size: 1.6rem;
		margin: 0 auto;
		display: block;
	}
	.register_radio{
		width: 86%;
    	margin: 2rem auto 0 auto;
    	padding-bottom: 2rem;
	}
	.register_radio_div{
		width: 100%;
		margin-top: 2rem;
	}
	.register_radio_divS{
		display: inline-block;
		width: 0.6rem;
		height: 0.6rem;
		border: 0.5rem solid #000;
		background: #fff;
		margin: 0.7rem 0;
		margin-right: 0.5rem;
		border-radius:2rem ;
	}
	.register_radio_divP{
		font-size: 1.6rem;
    	margin-right: 0.5rem;
    	line-height: 3rem;
	}
	.register_radio_divInput input{
		height: 3rem;
		width: 100%;
	    font-size: 1.4rem;
	    line-height: 1.6rem;
	    background: #fff;
		border: 1px solid #e6e6e6;
		box-sizing: border-box;
	    color: #000000;
	    border-radius: 0.4rem;
	    text-indent: 0.5rem;
	}
	.register_radio_divInput .register_radio_divInputD {
		width: 100%;
		height: 3rem;
		overflow: hidden;
		box-sizing:border-box;
		border: 1px solid #e6e6e6;
		background: #e6e6e6;
		border-radius: 0.4rem;
	}
	.register_radio_divInput .register_radio_divInputD span{
		display: inline-block;
		line-height: 3rem;
		color: #000;
		margin-left: 0.5rem;
		font-size: 1.5rem;
		font-family: "微软雅黑";
	}
	.register_radio_divInput .register_radio_divInputD input{
		height: 3rem;
	    font-size: 1.4rem;
	    line-height: 3rem;
	    background: #e6e6e6;
	    color: #000000;
	    border: 0;
	}
	.register_radio_divInput p{
		font-size: 1rem;
		color: #b2b2b2;
		width: 100%;
		line-height: 1.5rem;
	}
	.register_radio_divButton{
		width: 4.5rem;
		height: 4.5rem;
		margin-left: 0.5rem;
		background: #000;
		border-radius: 0.4rem;
		font-size: 1.2rem;
		box-sizing: border-box;
		color: #f7bd40;
		
	}
	.register_radio_active .register_radio_divS{
		background: #f7bd40;
	}
	.avatar{
		width: 100%;
		height: 10rem;
		object-fit: contain;
		
	}
</style>
<style>
	.Wregister .Jregister_body_areaSelect .el-input__inner{
		height: 2.5rem;
		line-height: 2.5rem;
		border:0.1rem solid #000000 !important;
		box-sizing: border-box;
		border-radius: 0.4rem;
		font-size: 1.2rem;
	}
	.Wregister .Jregister_body_areaSelect .el-input__suffix{
		right: 0;
		background: #000;
		
	}
	.Wregister .Jregister_body_areaSelect .el-input__suffix i{
		color: #f7bd40 !important;
	}
	.Wregister .Jregister_body_areaSelect .el-icon-arrow-up:before{
		content:"\E60C"
	}
	.Wregister .Jregister_body_picUpload .avatar-uploader .el-upload {
	    border: 1px dashed #000;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	    width: 47%;
	    float: left;
	    margin: 0 auto;
	    display: block;
	}
	.Wregister .Jregister_body_picUpload:nth-child(3) .avatar-uploader .el-upload{
		float: right;
	}
	.Wregister .Jregister_body_picPlus{
		text-align: center;
		padding: 2.2rem 0;
	}
	.Wregister .Jregister_body_picI{
		background: #000;
		width: 4rem;
		height: 4rem;
		border-radius: 0.4rem;
		margin: 0 auto;
	}
	.Wregister .Jregister_body_picI i{
		font-size: 2.5rem;
		font-weight: bold;
		line-height: 4rem;
		color: #f7bd40;
	}
	.Wregister .Jregister_body_picP{
		color: #666666;
		font-size: 1rem;
		margin-top: 1rem;
	}
	
</style>